<template>
  <!--首页 -->
  <div class="home-container">
    <el-carousel
      style="width: 100%; height: 100%"
      :interval="5000"
      arrow="always"
    >
      <el-carousel-item
        style="width: 100%; height: 100%"
        v-for="(item, index) in imgList"
        :key="index"
      >
        <img class="img-item" :src="item.imgSrc" alt="" />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      imgList: [
        {
          imgSrc:
            "https://q5.itc.cn/images01/20240320/7eda7043180f452589d848d7df86b213.jpeg",
        },
        {
          imgSrc:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.alicdn.com%2Fimgextra%2Fi1%2F2211246495038%2FO1CN01OGfSYx1n5S8QcpwoN_%21%212211246495038.jpg&refer=http%3A%2F%2Fimg.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1746256746&t=5c4af52f482581a65c20173910350ff7",
        },
        {
          imgSrc:
            "https://pic.rmb.bdstatic.com/bjh/down/f683ac359ef1e332fdf0d2733641951e.jpeg",
        },
        {
          imgSrc:
            "https://api.ibos.cn/v4/weapparticle/accesswximg?aid=92707&url=aHR0cHM6Ly9tbWJpei5xcGljLmNuL3N6X21tYml6X2pwZy8ydDFKYmliVU9iUVdLM3hpY29TbW51cHVZemJUSG9kQXdYSWVuVjhuWHhid0NKNjRCOFAxMEt3SEV1aWFmV0h2WHFWMWoxQUJlZDhqcU9aSmljZUhpY2ZXTVBRLzY0MD93eF9mbXQ9anBlZyZhbXA=;from=appmsg",
        },
      ],
    };
  },
  computed: {},
  async mounted() {},
  methods: {},
};
</script>

<style scoped lang="scss">
.home-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .el-carousel__item h3 {
    width: 100%;
    height: 100%;
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  ::v-deep .el-carousel .el-carousel__container {
    height: 100%;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }
  .img-item {
    display: block;
    width: 100%;
    height: 100%;
  }
}
</style>
